<template>
	<!-- 预约时间 -->
	<scroll-view v-if="times.length" scroll-x class="book-box" :scroll-into-view="'time' + scrollLeft">
		<view class="book-time-box" v-for="(item, index) of times" :key="'time' + index">
			<view :id="'time' + index" class="flex-column book-time" :class="{valid: item.valid, active: current == item.time}" @click="selectTime(item)">
				<view class="flex1"></view>
				<text class="book_hour">{{item.time}}</text>
				<text class="book_text">{{(current == item.time) ? '已选择' : (item.valid ? '可预约' : '已约满')}}</text>
				<view class="flex1"></view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		emits: ['select'],
		props:{
			times: {
				type: Array,
				default:function() {
					return []
				}
			},
			shop: {
				type:Number,
				default: 0
			},
			current: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				scrollLeft: 0
			};
		},
		mounted() {
			setTimeout(this.scrollToCurrent, 1000)
		},
		watch:{
			times() {
				this.scrollToCurrent()
			}
		},
		methods:{
			selectTime(item) {
				if (!item.valid) {
					return
				}
				this.$emit('select', {shop: this.shop, time: item.time})
			},
			scrollToCurrent() {
				console.log('寻找移动');
				console.log(this.current);
				if (this.current) {
					for (let i in this.times) {
						if (this.times[i].time == this.current) {
							// 移动到第I个方框的地方
							// 获取单个的长度
							this.scrollLeft = i-1;
							console.log('scroll to:' , i);
							this.$forceUpdate()
							break;
						}
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	
	$height: 152rpx;
	$width: 140rpx;
	.book-box{
		white-space: nowrap;
	}
	
	.book-time-box{
		height: $height;
		width: $width;
		display: inline-block;
		margin-left: 22rpx;
		&:first-child {
			margin-left: 0;
		}
	}
	
	.book-time{
		height: $height;
		width: $width;
		background-color: #E9E9E9;
		color: #999999;
		border-radius: 24rpx;
		font-size:28rpx;
		color: #999999;
		
		text{
			display: block;
			text-align: center;
		}
	}
	
	.book-time.valid{
		background-color: $uni-color-bg-orange;
		color: #fff;
		&.active{
			background: #fff;
			border: 1px solid $uni-color-bg-orange;
			box-sizing: border-box;
			.book_hour,
			.book_text{
				color: $uni-color-orange;
			}
		}
	}
</style>
